<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/cat.css">
    <script src="js/axios.js"></script>
    <!-- <script src="js/cat.js"></script> -->
    <!-- <script src="js/jquery.js"></script> -->
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/newbootstrap.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/aaaa.css">
</head>
<script src="js/index.js"></script>
<body>
<div id="headerTop">
    <div id="headerTop-next">
        <p>
            <a href="#">E宠首页</a>
        </p>
        <div class="songZ">送至：</div>
        <div class="diZ">北京</div>
        <p>
            <a href="#">E宠就是正品</a>
        </p>
    </div>
    <ul id="headerTop-Right">
        <li><a href="#">问题反馈</a></li>
        <li><i></i><a href="#">手机版</a></li>
        <li><i></i><a href="#">收藏</a><b></b></li>
        <li><i></i><a href="#">我的E宠</a><b></b></li>
        <li><i></i><a href="#">购物车(<span>0</span>)</a></li>
        <li><a href="#">[注册]</a></li>
        <li><a href="#">[登录]</a></li>
    </ul>
</div>
<div id="header-wrapper">
    <div id="header">
        <div id="header-logo">
            <a href="#"></a>
        </div>
        <div id="cat">购物车</div>
        <div id="header-search">
            <div id="header-search-form">
                <input type="text" name="keyword" placeholder="">
                <input type="button" value="搜索">
            </div>
           
        </div>
    </div>
</div>
<div id="cat-main">
    <div id="cat-main-top">
        <ul>
            <li>E宠购物车<span>0</span></li>
            <li>我的收藏<span>?</span></li>
            <li>我购买过<span>?</span></li>
            <li>最近浏览<span>10</span></li>
        </ul>
    </div>
</div>
<div id="box">
    <table class="Cattanle">
        <!-- <tr id="cart-list-cat">
            <td>
                <input type="checkbox" class="cat-list-checkbox">
            </td>
            <td>
                <div id="cart-list-img">
                    <a href="#">
                        <img src="img/cart-list-cat.jpg" alt="">
                    </a>
                </div>
                <div id="cart-list-p">
                    <a href="#">
                        加拿大原装进口纽顿 无谷低升糖系列 鸡肉&火鸡肉小型犬粮 2.27kg </a>
                </div>
            </td>
            <td>
                <div>
                    <span class="minus">-</span>
                    <input type="text" value="0" class="num">
                    <span class="plus">+</span>
                </div>
            </td>
            <td>
               
            </td>
            <td>
                <a href="#" class="detele">[删除]</a>
            </td>
        </tr> -->
    </table>
    <table class="Cattanle2">
        <tr id="cart-list-zong">
            <td>
                <div id="cart-list-M"> 
                    <div id="cart-list-label">
                        <label>
                            <input type="checkbox" class="quanxuan">全选
                        </label>     
                    </div>
                </div>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <div id="cart-list-zongjia">
                    <span>总价：</span>
                    <span class="Cart-list-zongjia">0</span>
                    <span>￥</span>
                </div>
            </td>
        </tr>
    </table>
</div>   
<!-- 接口地址：http://jx.xuzhixiang.top/ap/api/cart-list.php
        接口请求方式：get
        接口参数：
     id  用户id -->
      <script>
        let id = localStorage.getItem('uid');
        let url = `http://jx.xuzhixiang.top/ap/api/cart-list.php`;
        axios.get(url,{
            params:{
                id
            }
        }).then(res=>{
            console.log(res.data.data)
            let str = "";
            res.data.data.forEach(obj => {
            str += `
            <tr class="cart-list-cat" data-id="${obj.pid}" price="${obj.pprice}">
            <td>
                <input type="checkbox" class="cat-list-checkbox">
            </td>
            <td>
                <div id="cart-list-img">
                    <a href="#">
                        <img src="${obj.pimg}" alt="">
                    </a>
                </div>
                <div id="cart-list-p">
                    <a href="#">
                        ${obj.pname} </a>
                </div>
            </td>
            <td>
                <div>
                    <span class="minus">-</span>
                    <input type="text" value="${obj.pnum}" class="num">
                    <span class="plus">+</span>
                </div>
            </td>
            <td>
                <div class="Dzong">
                    <span class="p_sum-span">${obj.pnum*obj.pprice}</span>
                </div>    
            </td>
            <td>
                <div id="btn">
                    <button class="detele-btn" data-id="${obj.pid}">删除</button>
                </div>        
            </td>
        </tr>`
        })
        let List = document.querySelector('.Cattanle')//table
                List.innerHTML = str;
        let checkAll =document.getElementsByClassName('quanxuan') [0]; //全选框        
        let minus = document.getElementsByClassName('minus')//每一个减号
        let num = document.getElementsByClassName('num')//选择框的数
        let plus = document.getElementsByClassName('plus')//每一个加号
        let Znum = document.getElementsByClassName('p_sum-span')//单个商品的总价
        let list = document.getElementsByClassName('cart-list-cat')//每一个商品列表
        let totalPrice = document.getElementsByClassName('Cart-list-zongjia')[0]//总价
        let ck = document.getElementsByClassName('cat-list-checkbox') ; //每一个单选框
        

        //全选框 操作
        checkAll.onclick = function () {
            for (let i = 0; i < ck.length; i++) {
                ck[i].checked = checkAll.checked;
                getTotalPrice();
                updataData(i);
            }
        }
        //单选框操作
        for (let i = 0; i < ck.length; i++) {
            ck[i].onclick = function () {
                let count = 0;
                for (let j = 0; j < ck.length; j++) {
                    if (ck[j].checked) {
                        count++
                    }
                }
                if (count === ck.length) {
                    checkAll.checked = true;
                } else {
                    checkAll.checked = false;
                }
                getTotalPrice();
                updataData(i);
            }
        }
         //减
         for (let i = 0; i < minus.length; i++) {
             minus[i].onclick = function () {
                 num[i].value--;
                 if (num[i].value <= 0) {
                     num[i].value = 1;
                 }
                 updataData(i);
             }
            }    
            
        //加
        for (let i = 0; i < plus.length; i++) {
             plus[i].onclick = function () {
                 num[i].value++;
                 updataData(i);
             }
         }

         //文本框
         for (let i = 0; i < num.length; i++) {
            num[i].onchange = function () {
                if (num[i].value <= 0) {
                    num[i].value = 1;
                }
                updataData(i);
            }
        }
         deleteProduct();
        //单个商品总价 
        function updataData(i) {
            let Price = list[i].getAttribute("price");
            console.log(Price)
            Znum[i].innerText = num[i].value * Price;
            let uid = id;
            let pnum =num[i].value;
            let pid = list[i].getAttribute("data-id");
            let url = `http://jx.xuzhixiang.top/ap/api/cart-update-num.php`;
            // console.log(id)
            // console.log(pid)
            // console.log(pnum)
             axios.get(url, {
                params: {
                     uid,
                     pid,
                     pnum
                 }
             }).then(res => {

             })
              //总价计算
             getTotalPrice();
         }
        
        
           

        //计算总价
        function getTotalPrice() {
            let totalprice = 0;
            let ck = document.getElementsByClassName('cat-list-checkbox') ;
            for (let i = 0; i < ck.length; i++) {
                if (ck[i].checked) {
                    totalprice += +Znum[i].innerText;
                }

            }
            totalPrice.innerText = totalprice;
            if (ck.length == 0) {
                checkAll.checked = false;
                location.reload();
            }
        }

        //删除
        // 删除用户购物车中的商品 接口
        // 接口地址：http://jx.xuzhixiang.top/ap/api/cart-delete.php
        // 接口请求方式：get
        // 接口参数：
        // uid  用户id
        // pid  商品id
        function deleteProduct() {
            
            let deleteBtns = document.querySelectorAll('.detele-btn');  
            for (let i = 0; i < deleteBtns.length; i++) {
                deleteBtns[i].onclick = function () {
                    //调用删除接口
                    let uid = localStorage.getItem('uid')
                    // pid  按钮上 属性里面
                    let pid = this.getAttribute('data-id')
                    let url = `http://jx.xuzhixiang.top/ap/api/cart-delete.php`
                    axios.get(url, {
                        params: {
                            uid,pid
                        }
                    }).then(res => {
                        console.log(res.data);
                        // 刷新页面 ， loadData  ，this.父元素 。remove（）
                        this.parentNode.parentNode.parentNode.remove()
                    })
                }
            }
        }
        
        })
       
    </script>
<div id="footer">
    <div id="footer-top">
        <div id="footer-top-img">
            <ul class="footer-list">
                <li class="fl"><a class="zp" href="">正品保障</a></li>
                <li class="fl"><a class="ck"href="">品类丰富</a></li>
                <li class="fl"><a class="ps"href="">优质服务</a></li>
                <li class="fl"><a class="hh"href="">科学养宠</a></li>
                <li class="fl"><a class="bs"href="">E宠公益</a></li>
                <li class="fl"><a class="cj"href="">十年同心</a></li>
            </ul>
        </div>
    </div>
    <div id="footer-wrapper">
        <div id="ft-wrapper-top">
            <div id="ft-wrapper-topL">
                <img src="img/dog_phone.gif">
                <div id="ft-wrapper-number">
                    <h2 class="ft-number">售后电话</h2>
                    <p class="c660">4008889200<span class="m10">免费长途</span></p>
                    <p class="c660">023-68851700</p>
                    <p class="c440">服务时间：09:00--18:30(周一到周日)</p>
                </div>
            </div>
            <div id="ft-wrapper-topPay">
                <h2>购物指南</h2>
                <p class="topPay-p"><a href="#">新人优惠</a></p>
                <p class="topPay-p"><a href="#">购物问题</a></p>
                <p class="topPay-p"><a href="#">支付问题</a></p>
            </div>
            <div id="ft-wrapper-topShop">
                <h2>售后服务</h2>
                <p class="topShop-s"><a href="#">退换货问题</a></p>
                <p class="topShop-s"><a href="#">退款说明</a></p>
                <p class="topShop-s"><a href="#">售后问题</a></p>
            </div>
            <div id="ft-wrapper-topApp">
                <p class="topApp-a">扫码下载APP</p>
                <p class="topApp-a">下单更优惠</p>
                <a href="#">
                    <img src="img/dw2.png" alt="">
                </a>
            </div>
            <div id="ft-wrapper-topWx">
                <p class="topWx-w">扫码关注E宠</p>
                <p class="topWx-w">微信商城</p>
                <a href="#">
                    <img src="img/app-code.jpg" alt="">
                </a>
            </div>
        </div>
        <div id="ft-wrapper-Tnext">
            <div id="Tnext-wrapper">
                <span id="Tnext-wrapper-S">
                    <a href="#">关于我们</a>
                    <a href="#"><img src="img/weibo_logo.png">
                        E宠商城</a>
                    <a href="#"><img src="img/weixin_logo.png" >
                        E宠商城</a>
                    <a href="#"><img src="img/baidu_log.png" >
                        E宠商城百家号</a>
                    <a href="#"><img src="img/toutiao_logo.png">
                        E宠说</a>
                    <a href="#">E宠公益</a>
                    <a href="#">联系我们</a>
                    <a href="#">公司地址</a>
                    <a href="#">应急响应</a>
                    <a href="#">仓储中心</a>
                    <a href="#">用户协议</a>
                </span>
            </div>
        </div>
        <div id="ft-wrapper-support">
            <a href="#"><img src="img/12315.png" alt=""></a>
            <a href="#"><img src="img/360.png" alt=""></a>
            <a href="#"><img src="img/chengxin.png" alt=""></a>
            <a href="#"><img src="img/shiming.png" alt=""></a>
            <a href="#"><img src="img/tx.png" alt=""></a>
            <a href="#"><img src="img/jybz.png" alt=""></a>
            <a href="#"><img src="img/cqgs.png" alt=""></a>
            <span><img src="img/baiq.png" alt=""></span>
            <span><img src="img/wsls.png" alt=""></span>
            <span><img src="img/sfqy.png" alt=""></span>
            <span><img src="img/yxqy.png" alt=""></span>
            <span><img src="img/bhdw.png" alt=""></span>
            <span><img src="img/sjws.png" alt=""></span>
        </div>
        
        <div id="ft-wrapper-footer">
            <p>
                <a href="#">渝ICP备10002905号-3</a>
                <a href="#">营业执照</a>
                <a href="#">兽药经营许可证</a>
                　增值电信业务经营许可证：渝B2-20140042 Copyright © 2007-2020 epet.com 　重庆易宠科技有限公司
            </p>
        </div>
    </div>
</div>
<div id="rtcont">
    <ul id="rtcont-1">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li></li>
    </ul>
    <ul id="rtcont-2">
        <a id="rtcont-2-1" href="#"></a>
    </ul>
</div>
<script src="js/jquery.js"></script>
<script>
    $(function() {
        $("#rtcont-2-1").hide();
        $(window).bind('scroll',function(){
            if($(window).scrollTop()<=300){
                $("#rtcont-2-1").hide();
           	}else{
                $("#rtcont-2-1").show();
            }
        });
        $("#rtcont-2-1").bind("click",function(){
            $('html, body').animate({scrollTop: 0},500);
        });
   });
   $(function(){
       $("#misc-con").hide();
        $("#headerTop-Right li:eq(6) a").click(function(){
            $("#misc-con").show();
        }); 
        $("#stop").click(function(){
        $("#misc-con").hide();
       })
   });
   $(function(){
     $("#register-con").hide();
        $("#headerTop-Right li:eq(5) a").click(function(){
            $("#register-con").show();
        }); 
       $("#stop").click(function(){
        $("#register-con").hide();
       })
   })
</script>
    <div id="misc-con">
        <div id="misc-con-main">
            <p>
                <span>手机验证码登录</span>
                <span>|</span>
                <span>账户登录</span>
            </p>
            <div>
                <span></span>
                <input id="misc-n" type="text" placeholder="请输入手机号">
            </div>
            <div>
                <span></span>
                <input id="misc-p" type="text" placeholder="请输入密码">
            </div>
            <div id="misc-b">登录</div>
        </div>
    </div>
    <div id="register-con">
        <span id="stop"></span>
        <div id="register-con-main">
            <p>
                <span>新用户注册</span>
                <span>|</span>
                <span>直接登录</span>
            </p>
            <div>
                <span></span>
                <input id="register-n" type="text" placeholder="请输入手机号">
            </div>
            <div>
                <span></span>
                <input id="register-p" type="text" placeholder="请输入密码">
            </div>
            <div id="register-b">注册</div>
        </div>
    </div>
    <script src="js/axios.js"></script>
    <script>
        let Ldr = document.getElementById('LD-R')
        let Navmain = document.getElementById('nav-main-L')
        Ldr.style.display = "none"
        Navmain.onmouseover = function(){
            Ldr.style.display = "block"
        }
        Navmain.onmouseout = function(){
            Ldr.style.display = "none"
        }
    </script>
    <script>
        let ipts = document.getElementById("register-b");
         ipts.onclick = function(){
             let username = document.getElementById("register-n").value
             let password = document.getElementById("register-p").value
             let regAPI = 'http://jx.xuzhixiang.top/ap/api/reg.php'
            axios.get(regAPI,{
                params:{
                    username,
                    password
                }
            }).then(function(res){
                //请求成功
                   if(res.data.code == 1){
                        alert("注册成功")
                       location.href = 'index.html'
                   }
                }).catch(function(err){
                    //请求失败
                    console.log(err)
                })
            }
            let ipt = document.getElementById("misc-b");
            ipt.onclick = function(){
            let name = document.getElementById("misc-n").value
            let word = document.getElementById("misc-p").value
            let reg = 'http://jx.xuzhixiang.top/ap/api/login.php'
                axios.get(reg,{
                    params:{
                        username:name,
                        password:word
                    }
                }).then(function(res){
                    
                    //请求成功
                    if(res.data.code == 1){
                            alert("登录成功")
                            console.log(res.data.data.id)
                            localStorage.setItem('uid',res.data.data.id)
                            localStorage.setItem('token',res.data.data.token)
                        location.href = 'index.html'
                    }
                    }).catch(function(err){
                        //请求失败
                        console.log(err)
                    })
                }
            
    </script>
    <script src="js/misc.js"></script>
</body>
</html>